<template>
  <div :id="EchartsDomId" style="height: 100%; width: 100%"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref } from "vue";
const EchartsDomId = "EchartsDom" + Math.random().toString(36).slice(-8);
const props = defineProps({
  option: ref(),
});
var chartdom = null;
const initdom = () => {
  chartdom = echarts.init(document.getElementById(EchartsDomId));
  /*
  chartdom.getDom().getRootNode().onresize = () => {
    chartdom.resize("auto", "auto");
  }; */
  if (window.onresize) {
    var oldwinres = window.onresize;
    window.onresize = () => {
      oldwinres();
      chartdom.resize("auto", "auto");
    };
  } else {
    window.onresize = () => {
      chartdom.resize("auto", "auto");
    };
  }
};
function clear() {
  chartdom.clear();
}
function plot() {
  if (props.option) {
    chartdom.resize("auto", "auto");
    chartdom.setOption(props.option);
  }
}
defineExpose({
  plot,
  initdom,
  clear,
});
</script>
